import React, { useState } from 'react'
import { Menu } from 'antd'
import { useNavigate } from 'react-router'

const items = [
  { label: '今日记录', key: 'today' },
  { label: '工时统计', key: 'statistics' },
  { label: '项目管理', key: 'project' },
  { label: '密码管理', key: 'password' }
]

function Layout({ children }) {
  let [current, setCurrent] = useState('today')

  const navigate = useNavigate()

  function onClick(e) {
    setCurrent(e.key)
    navigate(e.key)
  }

  return (
    <div className={'h-full flex'}>
      <Menu onClick={onClick} items={items} selectedKeys={[current]} />
      <div className={'h-full flex-1 p-6'}>{children}</div>
    </div>
  )
}

export default Layout
